<template>
     <div class="button_box">
      <el-form ref="loginform" :model="loginFormData" status-icon :rules="valirules" label-width="120px"
        class="demo-loginFormData">
        <el-form-item label="用户名" prop="username" class="username-input-name">
          <el-input v-model="loginFormData.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" class="password-input-password">
          <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="capture" class="capture-input-capture">
          <el-input v-model="loginFormData.capture"  maxlength='5' @keydown.enter="submitForm(loginform)"/>
          <span v-loading="loading" class="Verification_Code" v-html="captha" @click="changeCaptha"></span>
        </el-form-item>
        <el-form-item class="font_input">
          <el-button type="primary" @click="submitForm(loginform)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script setup>
import { reactive, ref ,onMounted} from 'vue'
// 引入校验函数
import { valirules, useSubmitForm } from "../../../cpmposition/login/validata"
import {useUser} from "../../../store/allstore"
import {storeToRefs} from "pinia"
import * as api from "@/api/users.js"
import {useRouter} from "vue-router"
//引入loading加载框
import { ElLoading } from 'element-plus'
let userStore=useUser()


let router=useRouter()
// 控制loading的显示和隐藏
let loading=ref(true)

let captha=ref()
//获取验证码
let getcaptha =async ()=>{

  loading.value=true
  let res=await api.getCaptchaApi()
  loading.value=false
  if(res.data.state){
    
    captha.value=res.data.img
  }
  
}
//校验验证码
// 1.本地表单通过之后
//2。校验验证码，一定要配置本地代理
// 3.声明lodingInstance，用于存储loadling实例
let loadingInstance=null
let verifyCaptcha=async captha=>{
  loadingInstance =ElLoading.service({
  text:'正在销毁电脑....',
  background:'rgba(0,2,3,.4)'
})
  try{
    // 通过，发起请求
    let res=await api.veritfCaptchaApi(captha)
    login(loginFormData.username,loginFormData.password)

  }catch(e){
    // 不通过,重新刷新验证码
    getcaptha()
    loadingInstance.close()
  }
}



// setTimeout(()=>{
  
// },2000)

//用户名密码登录
/**
 * @param {String} username 用户名
 * @param {String} password 密码
 */
let login = async (username, password) => {
  //发起登录氢气的时候就要加载loading加载框
  //调用登录请求的接口
  try {
    let res = await api.loginApi(username, password)

    //存储token令牌
    sessionStorage.setItem('zjl-token', res.data.token)
    //存储用户信息
    userStore.$patch(res.data.userInfo)
    // 登录成功跳转主页
    router.push('/')
    loadingInstance.close()

  } catch (e) {
    console.log(e)
  }
}

onMounted(()=>{
  getcaptha()
})
let changeCaptha=()=> getcaptha()
let loginform=ref()
// 表单校验成功后,回调的方法
let validataSuccess = () => {
  //登录之前要先校验验证码，转换成小写
  verifyCaptcha(loginFormData.capture.toLowerCase())
  console.log('校验成功')
}
// 表单校验失败后,回调的方法
let validataFailed = () => {
  console.log('校验失败')
}
//使用useSubmitForm
let submitForm = useSubmitForm(validataSuccess, validataFailed)

// 注入到表单的数据
const loginFormData = reactive({
  username: '',
  password: '',
  capture: '',
})
</script>
<style lang="scss" scoped>
.username-input-name {
  :deep(.el-input) {
    width: 250px;
    height: 40px;
  }

  :deep(.el-form-item__label) {
    color: white;
    font-size: 16px;
  }

}

.password-input-password {
  :deep(.el-input) {
    width: 250px;
    height: 40px;
  }

  :deep(.el-form-item__label) {
    color: white;
    font-size: 16px;
  }
}

.capture-input-capture {
  :deep(.el-input) {
    width: 125px;
    height: 40px;
    // border-radius: 0;
  }

  :deep(.el-form-item__label) {
    color: white;
    font-size: 16px;

  }

  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
    box-shadow:none
  }
}

.font_input {
  color: red;

  :deep(.el-button) {
    width: 250px;
    height: 40px;
    margin-top: 20px;
    font-size: 16px;
  }
}

.button_box {
  padding-right: 50px;

}

.Verification_Code{
  width: 105px;
  height: 40px;
  background-color: white;
  border-left: none;
  cursor:pointer;
  border-radius: 0 4px 4px 0
}
.Verification_Code{
  :deep(svg){
    width: 100px;
    height: 40px;
  }
}
</style>